<template>
    <div class="home">
        <el-col :span="24">
            <el-col :span="9">
                <title-card title="设备在线统计">
                    <div id="c1"/>
                </title-card>
            </el-col>
            <el-col :span="6">
                <title-card title="设备状态统计">
                    <div id="c2"/>
                </title-card>
            </el-col>
            <el-col :span="9">
                <title-card title="设备分组统计">
                    <div id="c3"/>
                </title-card>
            </el-col>
        </el-col>
        <el-col :span="24">
            <base-card>
                <div id="device-map"/>
            </base-card>
        </el-col>
    </div>
</template>
<script>
    import {PointLayer, Scene} from '@antv/l7';
    import {GaodeMap} from '@antv/l7-maps';
    import G2 from '@antv/g2';

    export default {
        data() {
            return {};
        },
        mounted() {
            const data1 = [
                {year: '1991', value: 3},
                {year: '1992', value: 4},
                {year: '1993', value: 3.5},
                {year: '1994', value: 5},
                {year: '1995', value: 4.9},
                {year: '1996', value: 6},
                {year: '1997', value: 7},
                {year: '1998', value: 9},
                {year: '1999', value: 13}
            ];
            const chart1 = new G2.Chart({
                container: 'c1',
                forceFit: true,
                height: 300,
                padding: [20, 20, 20, 20]
            });
            chart1.source(data1);
            chart1.scale('value', {
                min: 0
            });
            chart1.scale('year', {
                range: [0, 1]
            });
            chart1.tooltip({
                crosshairs: {
                    type: 'line'
                }
            });
            chart1.line().position('year*value');
            chart1.point().position('year*value')
                .size(4)
                .shape('circle')
                .style({
                    stroke: '#fff',
                    lineWidth: 1
                });

            chart1.render();

            const data2 = [
                {item: '事例一', count: 40, percent: 0.4},
                {item: '事例二', count: 21, percent: 0.21},
                {item: '事例三', count: 17, percent: 0.17},
                {item: '事例四', count: 13, percent: 0.13},
                {item: '事例五', count: 9, percent: 0.09}
            ];
            const chart2 = new G2.Chart({
                container: 'c2',
                forceFit: true,
                height: 300,
                padding: [20, 20, 20, 20]
            });
            chart2.source(data2, {
                percent: {
                    formatter: val => {
                        val = (val * 100) + '%';
                        return val;
                    }
                }
            });
            chart2.coord('theta', {
                radius: 0.75
            });
            chart2.tooltip({
                showTitle: false,
                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            chart2.intervalStack()
                .position('percent')
                .color('item')
                .label('percent', {
                    formatter: (val, item) => {
                        return item.point.item + ': ' + val;
                    }
                })
                .tooltip('item*percent', (item, percent) => {
                    percent = percent * 100 + '%';
                    return {
                        name: item,
                        value: percent
                    };
                })
                .style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
            chart2.render();

            const data3 = [
                {year: '1951 年', sales: 38},
                {year: '1952 年', sales: 52},
                {year: '1956 年', sales: 61},
                {year: '1957 年', sales: 145},
                {year: '1958 年', sales: 48},
                {year: '1959 年', sales: 38},
                {year: '1960 年', sales: 38},
                {year: '1962 年', sales: 38}
            ];
            const chart3 = new G2.Chart({
                container: 'c3',
                forceFit: true,
                height: 300,
                padding: [20, 20, 20, 20]
            });
            chart3.source(data3);
            chart3.scale('sales', {
                tickInterval: 20
            });
            chart3.interval().position('year*sales');
            chart3.render();

            const scene = new Scene({
                id: 'device-map',
                map: new GaodeMap({
                    pitch: 0,
                    style: 'light',
                    center: [121.410765, 31.256735],
                    zoom: 14.83
                })
            });

            fetch(
                'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
            )
                .then(res => res.json())
                .then(data => {
                    scene.addImage(
                        '00',
                        'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
                    );
                    scene.addImage(
                        '01',
                        'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
                    );
                    scene.addImage(
                        '02',
                        'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
                    );
                    const imageLayer = new PointLayer()
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'longitude',
                                y: 'latitude'
                            }
                        })
                        .shape('name', ['00', '01', '02'])
                        .size(20);
                    scene.addLayer(imageLayer);
                });
        }
    };
</script>

<style lang="scss">
    #device-map {
        position: relative;
        width: 100%;
        height: 600px;
    }
</style>
